<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="description" content="年会抽奖程序" />
    <title>年会抽奖</title>
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/reset.css" />
    <link
      rel="stylesheet"
      href="js/element-ui@2.4.11/lib/theme-chalk/index.css"
    />
    <script src="js/polyfill.min.js"></script>
    <script type="text/javascript" src="js/tagcanvas.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/element-ui@2.4.11/lib/index.js"></script>
    <script src="js/member.js"></script>
  </head>
  <body>
    <div id="app" class="bg">
      <div class="next title" v-if="awards.length>0">
        <span class="title">{{ awards[currentAward].name }}({{result[currentAward].length}}/{{
          awards[currentAward].count
        }})</span> 
        <span v-show="awards[currentAward].award"
          >, 奖品：{{ awards[currentAward].award }}</span
        >
      </div>
      <div class="batch flexbox" v-show="!running && batchPlayers.length>0">
        <div class="player" v-for="(item, index) in batchPlayers" :key="index" @click="onKick(item)">
          {{ item.name }}
        </div>
      </div>
      <div class="result" v-show="batchPlayers.length===0">
        <div
          @click="onKick(item, index)"
          class="lucky-dog"
          v-for="(item, index) in result[currentAward]"
          :key="index"
        >
          {{ item.name }}
        </div>
      </div>
      <div id="myCanvasContainer">
        <canvas width="300" height="300" id="myCanvas" ref="canvas">
          <p>换个现代浏览器吧！</p>
        </canvas>
      </div>
      <div id="tags">
        <ul>
          <li v-for="(tag, index) in members" :key="index">
            <a href="#" target="_blank">{{ tag.name }}</a>
          </li>
        </ul>
      </div>
      <div class="buttons">
        <el-select v-model="currentAward" size="small">
          <el-option
            v-for="(item, index) in awards"
            :key="index"
            :label="item.name"
            :value="index"
          ></el-option>
        </el-select>
        <el-button size="small" ref="action" :disabled="buttonDisabled" type="danger" @click="toggle">{{
          buttonText
        }}</el-button>
        <el-button size="small" @click="onNext" :disabled="goOn || running">下一轮</el-button>
        <el-button
          size="small"
          :disabled="running"
          type="warning"
          size="small"
          class="el-icon-refresh"
          @click="onReplay"
          circle
        ></el-button>
        <span style="color: #fff; margin-left:10px;">{{players.length}}</span>
      </div>
    </div>
    <script type="text/javascript">
      new Vue({
        el: '#app',
        data: {
          running: false,
          awards: [],
          currentAward: 0,
          result: [],
          players: [],
          batchPlayers: [],
          members: [],
        },
        watch: {
          currentAward: function() {
            this.batchPlayers = [];
          },
        },
        computed: {
          buttonDisabled: function() {
            return (
              this.result[this.currentAward].length >=
              this.awards[this.currentAward].count || this.players.length === 0
            );
          },
          goOn: function() {
            return (
              this.result[this.currentAward].length <
                this.awards[this.currentAward].count &&
              this.result[this.currentAward].length > 0
            );
          },
          buttonText: function() {
            if (this.running) {
              return '停止';
            }
            if (this.goOn) {
              return '继续';
            }
            return '开始';
          },
        },
        methods: {
          toggle: function() {
            if (this.running) {
              this.stop();
            } else {
              this.start();
            }
          },
          getSpeed: function() {
            return [0.1 * Math.random() + 0.01, -(0.1 * Math.random() + 0.01)];
          },
          start: function() {
            this.running = true;
            TagCanvas.SetSpeed('myCanvas', [5, 1]);
          },
          stop: function() {
            this.running = false;
            TagCanvas.SetSpeed('myCanvas', this.getSpeed());
            var total = this.awards[this.currentAward].count;
            this.result[this.currentAward] =
              this.result[this.currentAward] || [];
            var todo = total - this.result[this.currentAward].length;
            var N = +localStorage.getItem('batchNumber') || 20;
            var batchPlayers = [];
            for (var i = 0, ln = Math.min(N, todo, this.players.length); i < ln; i++) {
              var index = this.getRandomInt(0, this.players.length - 1);
              batchPlayers.push(this.players.splice(index, 1)[0]);
            }
            // 
            // if (this.players.length === 0) {
            //   this.players = this.copy(this.members);
            //   this.$alert('所有人员都已中奖，剩余奖品将在现场所有人里抽取', '提示')
            // }
            this.batchPlayers = batchPlayers;
            this.result.splice(
              this.currentAward,
              1,
              this.result[this.currentAward].concat(batchPlayers)
            );
            localStorage.setItem('players', JSON.stringify(this.players));
            localStorage.setItem('result', JSON.stringify(this.result));
            TagCanvas.Reload('myCanvas');
          },
          onNext: function() {
            this.batchPlayers = [];
            if (this.currentAward < this.awards.length - 1) {
              this.currentAward += 1;
            }
          },
          getRandomInt: function(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min;
          },
          init: function() {
            try {
              TagCanvas.Start('myCanvas', 'tags', {
                textColour: null,
                dragControl: 1,
                decel: 0.95,
                textHeight: 14,
                minSpeed: 0.01,
                initial: [
                  0.1 * Math.random() + 0.01,
                  -(0.1 * Math.random() + 0.01),
                ],
              });
            } catch (e) {
              // something went wrong, hide the canvas container
              document.getElementById('myCanvasContainer').style.display =
                'none';
            }
          },
          onReplay: function() {
            var vm = this;
            this.$confirm('重新抽奖会清空当前奖项的结果，无法撤销！', '确定要重新抽奖吗？', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(function() {
              vm.batchPlayers = [];
              var p = vm.result.splice(vm.currentAward, 1, []);
              vm.players = vm.players.concat(p[0]);
              localStorage.setItem('players', JSON.stringify(vm.players))
              localStorage.setItem('result', JSON.stringify(vm.result));
            });
          },
          onKeyup: function(e) {
            console.log(e);
            // 空格或回车键
            if (e.keyCode === 13 || e.keyCode === 32) {
              this.$refs.action.$el.click();
            }
          },
          copy: function(obj) {
            return JSON.parse(JSON.stringify(obj));
          },
          onKick: function(player) {
            var vm = this;
            var index = vm.result[vm.currentAward].indexOf(player);
            this.$confirm('去掉后可继续抽一名', '去掉这名中奖者吗？', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(function() {
              if (vm.batchPlayers.indexOf(player) > -1) {
                vm.batchPlayers.splice(vm.batchPlayers.indexOf(player), 1);
              }
              vm.result[vm.currentAward].splice(index, 1);
              localStorage.setItem('result', JSON.stringify(vm.result));
            });
          },
        },
        created: function() {
          this.awards = JSON.parse(localStorage.getItem('awards')) || [];
          if (this.awards.length === 0) {
            location.href = 'setting.html';
          }

          var result = JSON.parse(localStorage.getItem('result')) || [];
          for (var i = 0; i < this.awards.length; i++) {
            result[i] = result[i] || [];
          }
          this.result = result;

          this.choosed = JSON.parse(localStorage.getItem('choosed')) || {};
          console.log(this.choosed);

          var awards = JSON.parse(localStorage.getItem('awards')) || [];
          this.rewards = awards.map(function(item, index) {
            return {
              level: index + 1,
              name: item.name,
              count: item.count,
              editing: {},
            };
          });
          console.log(this.rewards);
        },
        mounted: function() {
          var members = JSON.parse(localStorage.getItem('members')) || window.members;
          this.players = JSON.parse(localStorage.getItem('players')) || members;
          this.members = this.copy(members);
          localStorage.setItem('players', JSON.stringify(this.players));
          var canvas = this.$refs.canvas;
          canvas.width = document.body.offsetWidth;
          canvas.height = document.body.offsetHeight;
          this.$nextTick(function() {
            this.init();
          });
          document.body.addEventListener('keyup', this.onKeyup)
        },
      });
    </script>
  </body>
</html>
